<template>
  <div class="personInfo">
    <div class="person">
      <div class="person-left">
        <avaratImg :age="personInfo.age" :customerSex="personInfo.gender"></avaratImg>
      </div>
      <div class="person-middle">
        <div class="person-middle-left">
          <div class="name">{{personInfo.name}} <span style="font-size: 14px; color: #606266">{{personInfo.age ? (personInfo.age + '岁') : '未知'}}</span></div>
          <span class="tel">{{personInfo.mobileNum}}</span>
        </div>
        <div>
          <span style="font-size: 14px; color: #606266">（{{personInfo.historySickNum}}）</span>
        </div>

        <div class="person-middle-right">
          <div class="tag" v-if="personInfo.gender === '男'">
            <el-icon ><male /></el-icon>

          </div>
          <div class="tag tag-h" v-if="personInfo.gender === '女'">
            <el-icon ><female /></el-icon>
          </div>

          <div
            v-for="icon in personInfo.showRules"
            class="circular-icon p0"
            :key="icon.id"
            :class="{
              'bg-blue': icon.showType === '蓝色',
              'bg-orange': icon.showType === '黄色',
              'bg-red': icon.showType === '红色',
              'bg-green': icon.showType === '绿色',
              'bg-black': icon.showType === '黑色',
              }"
            >{{icon.showLabel}}</div>
          <div class="circular-icon p0 bg-red" v-if="personInfo.hasArrearsOrder">欠</div>
          <!-- <div class="tag tag-g">矫</div>
          <div class="tag tag-b">临</div> -->
        </div>
      </div>
    </div>
    <div class="doctor">
      <div class="doctor-top">
        <span class="doctor-top-name">初诊医生: </span>
        <span class="person-name">{{personInfo.lastDoctorName}}</span>
      </div>
      <div class="doctor-bottom">
        <span class="doctor-top-name">创建人: </span>
        <span class="person-name">{{personInfo.createUserName}}</span>
      </div>
    </div>
    <div class="date">
      <div class="date-top">
        <span class="prev-date">上次检查时间: </span>
        <el-tooltip placement="top">
          <template #content>{{personInfo.lastSickRecordTime}}</template>
          <span class="year">{{getBirthDay(personInfo.lastSickRecordTime || '')}}</span>
        </el-tooltip>
      </div>
      <div class="date-bottom">
        <span class="create-time">创建时间: </span>
        <el-tooltip placement="top">
          <template #content>{{personInfo.createTime}}</template>
          <span class="time">{{getBirthDay(personInfo.createTime || '')}}</span>
        </el-tooltip>
      </div>
    </div>
    <div class="source">
      <div class="top">
        <div>患者来源: </div>
        <!-- <span>2021-06-16</span> -->
      </div>
      <div class="bottom">
        <span>{{personInfo.sourceShow}}</span>
        <!-- <span> 广州路站</span> -->
      </div>
    </div>
    <div class="remarks">
      <div class="top">
        <div>备注 </div>
      </div>
      <div class="bottom">
        <el-tooltip placement="top">
          <template #content>{{personInfo.remark}}</template>
          <span>{{personInfo.remark || ''}}</span>
        </el-tooltip>
      </div>
    </div>
    <div class="btn">
      <el-button class="btn-1" @click="appointment" v-jurisdiction="'customer:subscribe:add'">创建预约</el-button>
    </div>
  </div>

  <el-drawer
			size="42%"
			:title="title"
			v-model="showDrawer"
			:before-close="drawerClose" destroy-on-close>
    <zaddpatient
					@cancel="cancel"
					@saveMakeAnAppointment="saveMakeAnAppointment"
					@saveAndRegister="saveAndRegister"
					v-if="isADD === 'add'"
		></zaddpatient>
    <zregister v-if="isADD === 'register'"
				@cancel="cancel"
		></zregister>
    <zmakeanapp
      v-if="isADD === 'makeanapp'"
      @handlebtn="handlebtn"
      @cancel="cancel"
      :personName="personInfo.name"
      :personId="personId"
    ></zmakeanapp>
  </el-drawer>
</template>

<script lang="ts">
import { Male, Female} from '@element-plus/icons-vue'
import { defineComponent, ref, watch } from "vue";
import zmakeanapp from "../../components/patient/makeAnAppointment.vue"
import zaddpatient from "../../components/patient/add.vue"
import zregister from "../../components/patient/register.vue"
import { getBirthDay } from "../../usefn/getBirthday"

import useRequet, { RespData } from "../../hook/network"
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import avaratImg from "../../components/avatarImg/avatarImg.vue"
export default defineComponent({
  components: {
    zmakeanapp,
    zaddpatient,
    zregister,

    avaratImg,
    Male, Female
  },
  props: {
    id: {
      type: String
    }
  },
  emits: ['getPersonName'],
  setup(props, ctx) {
    let id = props.id
    const request = useRequet({ path: "" });
    const personInfo = ref({} as any)
    const isADD = ref('')
    const title = ref('新建预约')
    const showDrawer = ref(false)
    const store = useStore()

    let route = useRoute()
    const personId = ref<number | any>(route.params.id)

    watch(() => route.params.id, (newV) => {
      if(newV) {
        personId.value = newV
      }

    })

    watch(() => props.id, (newID, prevID) => {

      if(newID) {
        getCustomerInfo(Number(newID))
      }

    }, )

    const getCustomerInfo = (id: number) => {
      request.sendRequest({
          address: `customer/info/getCustomerInfo/${id}`,
          params: {},
          success: (resp: RespData) => {
            if(resp.code !== 0) return ElMessage.error(resp.msg)
            personInfo.value = resp.data
            // 得到患者账户余额
            let balanceShow = resp.data.account && resp.data.account.balanceShow
            let doctorId = resp.data.lastDoctorId || ''
            let customerName = resp.data.name
            let doctor = {
              id: doctorId,
              name: resp.data.lastDoctorName
            }
            window.localStorage.setItem('customerName', customerName)
            window.localStorage.setItem('doctorId', doctorId)
            window.localStorage.setItem('doctor', JSON.stringify(doctor))



            store.dispatch('getBalanceShow', balanceShow)

            ctx.emit('getPersonName', resp.data.name)
          },
          fail: (resp: RespData) => {
            if(resp.code !== 0) return ElMessage.error(resp.msg)

          },
          method: "GET",
        })
    }
    getCustomerInfo(Number(id))

    const saveMakeAnAppointment = () => {
      isADD.value = 'makeanapp'
			title.value = "新建预约"
    }

    const saveAndRegister = () => {
			isADD.value = 'register'
			title.value = "挂号"
		}


    const handlebtn = () => {
      isADD.value = 'add'
			title.value = "个人信息"
    }
    const drawerClose = () => {
      showDrawer.value = false
    }

    const appointment = () => {
      console.log('点击创建预约')
      isADD.value = 'makeanapp'
      showDrawer.value = true
    }

    const cancel = () => {
      showDrawer.value = false
    }

    return {
      personId,
      request,
      personInfo,
      isADD,
      title,
      getBirthDay,
      showDrawer,
      saveMakeAnAppointment,
      handlebtn,
      saveAndRegister,
      cancel,

      appointment,
      drawerClose,
      getCustomerInfo,
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@style/extend';
.personInfo {
  // width: 100%;
  // max-height: 200px;
  border: 2px solid $mainColor;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  overflow: hidden;
  background: $a2-Color;
  .person {
    display: flex;
    box-sizing: border-box;
    .person-left {
      flex: 1;
      padding: 0 15px 0 15px;
      .w40 {
        width: 40px;
        height: 40px;
      }
    }
    .person-middle {
      flex: 8;
      display: flex;
      .person-middle-left {
        // padding: 10px 0 0 0;
        box-sizing: border-box;
        .name {
          @extend .standard-11;
        }
        .tel {
          @extend .standard-1;
        }
      }
      .person-middle-right {
        display: flex;
        // align-items: center;
        flex-wrap: wrap;
        // width: 70px;
        padding: 0 10px 0 10px;
        box-sizing: border-box;
        .tag {
          border-radius: 50%;
          background: #409EFF;
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          color: white;
          margin-right: 5px;
          margin-bottom: 5px;
          font-size: 12px;
        }
        .tag-o {
          background: orange;
        }
        .tag-h {
          background: #F56C6C;
        }
        .tag-g {
          background: #67C23A;
        }
        .tag-b {
          background: #409EFF;
        }
        .tag-black {
          background: #000000;
        }
      }
    }
  }
  .doctor {
    // flex: 1;
    padding-right: 10px;
    padding-left: 10px;
    position: relative;
    // height: 70px;
    .doctor-top {
      display: flex;
      .doctor-top-name {
        min-width: 80px;
        font-weight: 600;
        padding-bottom: 10px;
        padding-right: 5px;
        @extend .standard-4;
      }
      .person-name {
        @extend .standard-3;
        min-width: 50px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
    .doctor-bottom {
      .doctor-top-name {
        width: 80px;
        font-weight: 600;
        // padding-bottom: 10px;
        padding-right: 5px;
        @extend .standard-4;
      }
      .person-name {
        @extend .standard-3;
        width: 50px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
  .doctor::before {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background: $mainColor;
    position: absolute;
    left: 0;
  }
  .date {
    // flex: 3;
    padding-right: 10px;
    padding-left: 10px;
    position: relative;
    .date-top {
      display: flex;
      .prev-date {
        min-width: 100px;
        font-weight: 600;
        padding-bottom: 10px;
        padding-right: 5px;
        @extend .standard-4;
      }
      .year {
        @extend .standard-3;
        // width: 80px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
    .date-bottom {
      display: flex;
      .create-time {
        width: 100px;
        padding-right: 5px;
        @extend .standard-4;
      }
      .time {
        @extend .standard-3;
        // width: 80px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
  .date::before {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background: $mainColor;
    position: absolute;
    left: 0;
  }
  .source {
    // flex: 2;
    padding-right: 10px;
    padding-left: 10px;
    position: relative;
    .top {
      width: 80px;
      font-weight: 600;
      padding-bottom: 10px;
      padding-right: 5px;
      @extend .standard-4;
    }
    .bottom {
      @extend .standard-1;
      display: inline-block;
      min-width: 120px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

  }
  .source::before {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background: $mainColor;
    position: absolute;
    left: 0;
  }
  .remarks {
    padding-right: 10px;
    padding-left: 10px;
    position: relative;
    box-sizing: border-box;
    width: 100px;
    .top {
      width: 60px;
      font-weight: 600;
      padding-bottom: 10px;
      padding-right: 5px;
      @extend .standard-4;
    }
    .bottom {
      width: 100%;
      @extend .standard-1;
      display: inline-block;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
  .remarks::before {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background: $mainColor;
    position: absolute;
    left: 0;
  }
  .btn {
    flex: 1;
    text-align: right;
    padding-right: 20px;
  }
}

.icon {
  width: 32px;
  height: 32px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
